import type { TableColumn } from '@/components/core/dynamic-table';
import { Tooltip } from 'ant-design-vue';
import { selectDictLabel } from '@/utils/telchina';
import { reactive } from 'vue';

// 当前页面使用的数据
export const pageDataObj = reactive({
  workOrderTypeDict: [],
  industryTypeDict: [],
  regionDict: [],
  infoSerrcesTypeDict: [],
  responsibleUnitDict: [],
  workOrderStatus: [],
});
export type TableColumnItem = TableColumn;

export const baseColumns: TableColumnItem[] = [
  {
    title: '工单编号',
    key: 'workOrderNumber',
    dataIndex: 'workOrderNumber',
    align: 'center',
    width: '120px',
    fixed: 'left',
    formItemProps: {
      colProps: {
        span: 6,
      },
    },
  },
  {
    title: '工单状态',
    key: 'workOrderStatus',
    dataIndex: 'workOrderStatus',
    align: 'center',
    fixed: 'left',
    width: 120,
    customRender: ({ record }) => {
      return selectDictLabel(pageDataObj.workOrderStatus, record.workOrderStatus);
    },
    hideInSearch: true,
    formItemProps: {
      // colProps:{
      //   span: 6,
      // },
      component: 'Select',
    },
  },
  {
    title: '工单类型',
    key: 'workOrderTypes',
    dataIndex: 'workOrderType',
    width: 100,
    align: 'center',
    customRender: ({ record }) => {
      return selectDictLabel(pageDataObj.workOrderTypeDict, record.workOrderType);
    },
    formItemProps: {
      colProps: {
        span: 6,
      },
      component: 'Select',
      componentProps: {
        mode: 'multiple',
        options: pageDataObj.workOrderTypeDict,
      },
    },
  },
  {
    title: '行业类型',
    key: 'industryTypes',
    dataIndex: 'industryType',
    align: 'center',
    width: 120,
    customRender: ({ record }) => {
      return selectDictLabel(pageDataObj.industryTypeDict, record.industryType);
    },
    formItemProps: {
      component: 'TreeSelect',
      colProps: {
        span: 6,
      },
      componentProps: {
        multiple:true,
      }
    },
  },
  {
    title: '信息来源',
    width: 150,
    key: 'infoSerrces',
    dataIndex: 'infoSerrces',
    align: 'center',
    hideInSearch: true,
    customRender: ({ record }) => {
      return selectDictLabel(pageDataObj.infoSerrcesTypeDict, record.infoSerrces);
    },
  },
  {
    title: '问题描述',
    key: 'problemDesc',
    dataIndex: 'problemDesc',
    align: 'center',
    width: 300,
    formItemProps: {
      colProps: {
        span: 6,
      },
    },
    customRender: ({ record }) => {
      return (
        <Tooltip title={record.problemDesc}>
          <div class="ellipsis" style={{ float: 'left', maxWidth: '100%' }}>
            {record.problemDesc}
          </div>
        </Tooltip>
      );
    },
  },

  {
    title: '发生地址',
    key: 'occAddress',
    dataIndex: 'occAddress',
    align: 'center',
    width: 300,
    hideInSearch: true,
    customRender: ({ record }) => {
      return (
        <Tooltip title={record.occAddress}>
          <div class="ellipsis" style={{ float: 'left', maxWidth: '100%' }}>
            {record.occAddress}
          </div>
        </Tooltip>
      );
    },
  },
  {
    title: '责任单位',
    key: 'responsibleUnits',
    dataIndex: 'responsibleUnit',
    align: 'center',
    width: 100,
    formItemProps: {
      component: 'TreeSelect',
      colProps: {
        span: 6,
      },
      componentProps: {
        filterTreeNode: true,
        treeNodeFilterProp: 'name',
        treeDefaultExpandAll: true,
        multiple: true,
        
      }
    },
    customRender: ({ record }) => {
      return selectDictLabel(pageDataObj.responsibleUnitDict, record.responsibleUnit);
    },
  },

  {
    title: '联系方式',
    key: 'contactsInfo',
    dataIndex: 'contactsInfo',
    width: 120,
    hideInSearch: true,
    align: 'center',
  },
  {
    title: '处理期限',
    key: 'processingPeriod',
    dataIndex: 'processingPeriod',
    align: 'center',
    width: 100,
    hideInSearch: true,
  },
  {
    title: '派单时间',
    key: 'dispatchTime',
    dataIndex: 'dispatchTime',
    align: 'center',
    width: 180,
    formItemProps: {
      component: 'RangePicker',
      colProps: {
        span: 6,
      },
      componentProps: {
        showTime: true,
      },
    },
  },
  {
    title: '到期时间',
    key: 'expirationTime',
    dataIndex: 'expirationTime',
    align: 'center',
    width: 180,
    hideInSearch: true,
  },
];
